<template>
  <!-- 表格 -->
  <el-table class="pageTableClass" :data="taskNoPage" height="calc(100vh - 380px)" :loading="isLoading">
    <el-table-column label="序号" align="center" width="70">
      <template #default="scope">
        {{ (paginationParams.current - 1) * paginationParams.pageSize + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="code" min-width="150" label="计划编号" align="center"/>
    <el-table-column prop="planName" min-width="150" label="计划名称" align="center"/>
    <el-table-column prop="planDescription" min-width="250" label="计划描述" show-overflow-tooltip align="center"/>
    <el-table-column prop="equipmentName" min-width="200" label="设备名称" align="center"/>
    <el-table-column prop="equipmentCode" min-width="200" label="设备编码" align="center"/>
    <el-table-column prop="activeLine" min-width="180" label="触发时间" align="center"/>
    <el-table-column prop="organizationName" min-width="200" label="所属部门" align="center"/>
    <el-table-column prop="planTimeCost" min-width="100" label="计划用时" align="center"/>
    <el-table-column label="操作" align="center" fixed="right" width="200">
      <template #default="scope">
        <el-button style="color:#4160beed" @click="handleStart(scope.row)" text :icon="CaretRight" size="small"
                   v-if="scope.row.status == 'CREATED'" plain>开始
        </el-button>
        <el-button style="color:#4160beed" @click="handleEdit(scope.row)" text :icon="CircleCheck" size="small"
                   plain v-if="scope.row.status == 'EXECUTING'">完成
        </el-button>
        <el-button style="color:#4160beed" @click="handleView(scope.row)" text :icon="View" size="small"
                   plain>查看
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagePagination">
    <el-pagination background v-model:current-page="paginationParams.current"
                   v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next"
                   :total="pageTotal"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>

  <!-- 完成任务的弹框（可编辑） -->
  <el-dialog v-model="dialogVisible" title="确认完成任务" width="60%">
    <el-table class="pageTableClass" :data="contentDialog">
      <el-table-column prop="content" min-width="150" label="点检内容" align="center"/>
      <el-table-column prop="describe" min-width="200" label="原因描述" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.describe" type="textarea" placeholder="请输入原因描述"/>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 查看任务的弹框（只读） -->
  <el-dialog v-model="viewDialogVisible" title="查看点检内容" width="60%">
    <el-table class="pageTableClass" :data="viewContentDialog">
      <el-table-column prop="content" min-width="150" label="点检内容" align="center"/>
<!--      <el-table-column prop="result" min-width="120" label="结果" align="center"/>-->
<!--      <el-table-column prop="describe" min-width="200" label="原因描述" align="center"/>-->
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="viewDialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineProps, ref, onMounted} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {CircleCheck, CaretRight, View} from '@element-plus/icons-vue';
import moment from "moment";

const dialogVisible = ref(false); // 完成弹框
const viewDialogVisible = ref(false); // 查看弹框
const form = ref({});
const formLabelWidth = ref('120px');
const contentDialog = ref([]); // 完成弹框数据
const viewContentDialog = ref([]); // 查看弹框数据

const props = defineProps({
  paginationParams: Object,
  onSubmit: Function,
  handleSizeChange: Function,
  handleCurrentChange: Function,
  taskNoPage: Array,
  pageTotal: Number,
  equipmentData: Object,
  fetchPage: Function,
  isLoading: Boolean
});

// 开始任务
const handleStart = (row) => {
  ElMessageBox.confirm('是否开始保养任务?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.startDatetime = moment().format('YYYY-MM-DD HH:mm:ss');
    props.onSubmit({
      ...row,
      status: 'EXECUTING'
    }, () => {
      props.fetchPage();
    });
  });
};

// 完成任务（打开弹框）
const handleEdit = (row) => {
  form.value = {...row};
  const ArrayData = JSON.parse(row?.result)?.map(item => ({
    content: item?.content,
    result: item?.result,
    describe: item?.describe
  })) || [];
  contentDialog.value = ArrayData;
  dialogVisible.value = true;
};

// 查看任务（打开只读弹框）
const handleView = (row) => {
  const ArrayData = JSON.parse(row?.result)?.map(item => ({
    content: item?.content,
    result: item?.result,
    describe: item?.describe
  })) || [];
  viewContentDialog.value = ArrayData;
  viewDialogVisible.value = true;
};

// 提交完成
const handleSubmit = () => {
  const now = new Date();
  const endDatetime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;

  props.onSubmit({
    ...form.value,
    endDatetime,
    status: 'FINISHED',
    result: JSON.stringify(contentDialog.value)
  }, () => {
    dialogVisible.value = false;
    props.fetchPage();
  });
};
</script>

<style scoped>
.pageTableClass {
  width: 100%;
}

.pagePagination {
  margin-top: 20px;
  text-align: center;
}
</style>